<template>
	<view class="container">
		<view class="content-item" v-if="list_youji.length>0">
			<view class="title-item"><span></span>邮寄商品</view>
			<view class="cu-form-group">
				<view class="flex solid-bottom between" @click="addressAction">
					<view class="flex solid-bottom">
						<view class="padding-lg radius">
							<uni-text class="lg text-gray cuIcon-locationfill"><span></span></uni-text>
						</view>
						<view class="padding-sm margin-xs radius">
							<!-- center<br/>12321312321 -->
							{{addressInfo.contact}} {{addressInfo.tel}}<br>{{addressInfo.address}} {{addressInfo.no}}
						</view>
					</view>
					<view class="padding-lg radius">
						<uni-text class="lg text-gray cuIcon-right"><span></span></uni-text>
					</view>
				</view>
			</view>
			<!-- 商品结算列表  邮寄-->
			<block v-for="(item, index) in list_youji" :key="item.spuId">
				<view class="goods-section">
						<view class="g-item">
							<image :src="item.img"></image>
							<view class="right">
								<text class="title clamp">{{ item.name }}</text>
								<!-- <text class="spec">{{ buyInfo.selected }}</text> -->
								<view class="price-box">
									<text class="price">{{ item.amount }}积分</text>
								</view>
								<view class="price-box">
									<text class="number">x {{ item.total }}</text>
								</view>
							</view>
						</view>
				</view>
			</block>
		</view>
		<view class="content-item"  v-if="list_ziti .length>0">
			<view class="title-item"><span></span>自提商品</view>
			<view class="yt-list">
				<view class="cu-form-group">
					<view class="title">自提站点</view>
					<picker @change="PickerChangeStore" :value="indexStore" :range="pickerStore">
						<view class="picker">
							{{indexStore>-1?pickerStore[indexStore]:'请选择自提站点'}}
						</view>
					</picker>
				</view>
			</view>
			<!-- 商品结算列表 自提-->
			<block v-for="(item, index) in list_ziti" :key="item.spuId">
				<view class="goods-section">
						<view class="g-item">
							<image :src="item.img"></image>
							<view class="right">
								<text class="title clamp">{{ item.name }}</text>
								<!-- <text class="spec">{{ buyInfo.selected }}</text> -->
								<view class="price-box">
									<text class="price">{{ item.amount }}积分</text>
								</view>
								<view class="price-box">
									<text class="number">x {{ item.total }}</text>
								</view>
							</view>
						</view>
				</view>
			</block>
		</view>
		<!-- 积分计算 -->
		<view class="yt-list" style="border-radius: 5px;border: 1px solid #e2e2e2;">
			<view class="yt-list-cell b-b">
				<view class="title">已有积分</view>
				<text class="cell-tit clamp"></text>
				<text class="cell-tip active">{{ totalNum || 0 }} 积分</text>
			</view>
			<view class="yt-list-cell b-b">
				<view class="title hb">使用积分</view>
				<text class="cell-tit clamp"></text>
				<text class="cell-tip active">{{ totalPoints || 0 }} 积分</text>
			</view>
			<view class="yt-list-cell b-b">
				<view class="title lpk">剩余积分</view>
				<text class="cell-tit clamp"></text>
				<text class="cell-tip active">{{ (totalNum - totalPoints) }} 积分</text>
			</view>
		</view>

		<!-- 金额明细 -->
		<!-- <view class="yt-list">
			<view class="cu-form-group">
				<view class="title">用户姓名</view>
				<input class="desc" style="text-align: right;" type="text" v-model="userInfo.name" placeholder="请填写真实姓名" placeholder-class="placeholder" />
			</view>
			<view class="cu-form-group">
				<view class="title">手机号码</view>
				<input class="desc" style="text-align: right;" type="number" v-model="userInfo.mobile" placeholder="请填写手机号码" placeholder-class="placeholder" />
			</view>
		</view> -->

		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>使用积分：</text>
				<text class="price">{{ totalPoints }}</text>
			</view>
			<text class="submit" @click="submitAction">立即兑换</text>
		</view>
		<view class="cu-modal" :class="modalName === 'DialogModal1' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="padding-xl">
          使用 <span style="color: orangered;margin-left: 5px;">{{totalPoints}} 积分</span><br /><br />
					<!-- 数量 {{ num }} 件<br /> -->
					<block  v-for="(item, index) in list" :key="index">
						"{{item.name}}"<span style="color: orangered;margin-left: 5px;">x {{item.total}}</span><br /><br />
					</block>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="cancel">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="submit">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { pickupStationMobileService,insertUserIntegralReciveRecord, selectUserIntegralById, getOpenidMsg,userAddressServicefindList } from 'api/shop';
import { cartGet, cartClear, cartDelete, deleteBatch } from 'api/cart'

export default {
	data() {
		return {
			indexStore:-1,
			pickerStore: ['请选择自提站点'],
			addressInfo:{
				contact:'暂无地址',
				tel:'',
				address:'请编辑收货地址',
				no:''
			},
			list: [],
			list_youji:[],
			list_ziti:[],
			totalNum: '0',
			totalPoints: '',
			buyInfo: [],
			userInfo: {
				mobile: '',
				name: ''
			},
			modalName: null,
			addressIndex:''
		}
	},

	onLoad(option) {
		if(option.index){
			this.addressIndex = option.index
		}
		// this.list = JSON.parse(option.data)
		this.list = JSON.parse(localStorage.getItem('cartInfo'));
		let dataList = JSON.parse(localStorage.getItem('cartInfo'));
		let total = 0
		let num = 0
		for (const val of dataList) {
		  total += val.amount * (val.number || val.total)
		  num += val.total
		}
		this.num = num
		this.totalPoints = total
		
		this.list_youji = []
		this.list_ziti = []
		for (var i = 0; i < dataList.length; i++) {
			if(dataList[i].deliveryType == '1'){
				this.list_ziti.push(dataList[i])
			}
			if(dataList[i].deliveryType == '0'){
				this.list_youji.push(dataList[i])
			}
		}
		console.log('localStorage.getItem',JSON.parse(localStorage.getItem('cartInfo')))
		// console.log('JSON.parse(option.data)',JSON.parse(option.data))

		this.getOpenidMsgAction();
		this.pickupStationMobileServiceAction(localStorage.getItem('brandId'))
		this.buyInfo = JSON.parse(localStorage.getItem('buyInfo'));
	},

	methods: {
		pickupStationMobileServiceAction(id){
			pickupStationMobileService({brandId: id}).then(ret => {
				if (ret.data.errcode === 0) {
					for (var i = 0; i < ret.data.data.result.length; i++) {
						this.pickerStore.push(ret.data.data.result[i].name+' ('+ret.data.data.result[i].address+')')
					}
					if(this.pickerStore.length>1){
						this.indexStore = 1
					}
				}
			});
		},
		PickerChangeStore(e) {
			console.log(e)
			this.indexStore = e.detail.value
			console.log(this.indexStore,'indexStore')
			// console.log(this.pickerStore)
		},
		addressAction(){
			uni.navigateTo({
				url: `/pages/address/address?createOrder=1&cart=1`
			});

		},
		userAddressServicefindListAction(uid){
			userAddressServicefindList({uid:uid}).then(ret => {
				if (ret.data.errcode === 0) {
					let addressList = ret.data.data.result
					if(addressList.length > 0){
						for (var i = 0; i < addressList.length; i++) {
							if(addressList[i].isDefault === '1'){
								this.addressInfo = addressList[i]
							}
						}
						setTimeout(() => {
							if(this.addressInfo.address === '请编辑收货地址'){
								this.addressInfo = addressList[0]
							}
						}, 800)
						if(this.addressIndex != ''){
							this.addressInfo = addressList[this.addressIndex]
						}
					}
				} else {
					this.$api.msg(ret.data.errmsg);
					return false;
				}
			});
		},
		/**
		 * @param {String} 身份证号码
		 */
		totalPrice(param) {
			selectUserIntegralById({
				idCard: param,
				type:'0',
				brandId: localStorage.getItem("brandId")
			}).then (ret => {
				if (ret.data.errcode === 0) {
					this.totalNum = ret.data.data.totalActivity
				} else {
					this.$api.msg(ret.data.errmsg)
				}
			})
		},

		cancel() {
			this.modalName = ''
		},

		submitAction() {
			if(this.addressInfo.address == '请编辑收货地址'){
				this.modalName = ''
				this.$api.msg('请添加收货地址！');
				return false;
			}
			if (this.userInfo.name === '') {
				this.$api.msg('用户姓名不能为空！')
				return false
			}

			if (!this.checkMobile(this.userInfo.mobile)) {
				this.$api.msg('手机号码有误！')
				return false
			}

			this.modalName = 'DialogModal1'
		},

		checkMobile(mobile) {
		  return RegExp(/^1[34578]\d{9}$/).test(mobile)
		},

		/**
		 * 提交兑换结算
		 * @param {array} list 提交数据
		 */
		submit() {
			console.log(this.addressInfo,'this.addressInfo')
			if(this.addressInfo.address == '请编辑收货地址'){
				this.modalName = ''
				this.$api.msg('请添加收货地址！');
				return false;
			}
			for (const val of this.list_youji) {
				val.userName = this.addressInfo.contact
				val.mobile = this.addressInfo.tel
				val.address = this.addressInfo.address+this.addressInfo.no
				val.type = '0'
			}
			
			for (const val of this.list_ziti) {
				if(!this.addressInfo.tel){
					val.userName = this.userInfo.name
					val.mobile = this.userInfo.mobile
					val.address = this.pickerStore[this.indexStore]
					val.type = '0'
				}else{
					val.userName = this.addressInfo.contact
					val.mobile = this.addressInfo.tel
					val.address = this.pickerStore[this.indexStore]
					val.type = '0'
				}
			}
			
			let arr = []
			if(this.list_youji.length>0){
				arr = this.list_youji.concat(this.list_ziti)
			}else{
				arr = this.list_ziti.concat(this.list_youji)
			}
			console.log(this.list_youji,'邮寄')
			console.log(this.list_ziti,'自提')
			console.log(arr,'组装结果')

			insertUserIntegralReciveRecord({
				list: arr
			}).then(ret => {
				if (ret.data.errcode === 0) {
					this.modalName = ''
					this.deleteCartItem()
					this.$api.msg('兑换成功！');

					uni.switchTab({
						url: '/pages/user/user',
					});
				} else {
					this.modalName = ''
					this.$api.msg(ret.data.errmsg)
				}
			})
		},

		// 删除购物车商品
		deleteCartItem(index) {
			deleteBatch({
				list: this.list,brandId: localStorage.getItem("brandId")
			}).then (ret => {})
		},

		handle() {
			// window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
			let ua = window.navigator.userAgent.toLowerCase();
			// 通过正则表达式匹配ua中是否含有MicroMessenger字符串
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        //是微信浏览器
        window.location.href = this.$xeUtils.locat().origin + '/yq/#/handle-submit'
				// window.location.href = 'https://shengst.tripln.top/subsidy/#/city-card-handle';
			} else {
				window.location.href = 'https://shengst.tripln.top/subsidy/#/city-card-handle-app';
			}
		},

		getOpenidMsgAction() {
			getOpenidMsg().then(ret => {
				if (ret.data.errcode === 0) {
					let data = ret.data.data.result;
					if (data) {
						if (data.cardNo === null || data.cardNo === '' || data.cardNo === undefined) {
							this.handle();
						} else {
							this.userInfo = data.oauth;
							this.userAddressServicefindListAction(data.cardNo)
							this.totalPrice(data.cardNo);
						}
					} else {
						this.handle();
					}
				} else if (ret.data.errcode === 9999 || ret.data.errcode === 9991) {
					this.handle();
				} else {
					this.$api.msg(ret.data.errmsg);
					return false;
				}
			})
		}
	}
};
</script>

<style lang="scss">
	.container{
		padding: 0 10px 10px 10px;
	}
page {
	background: $page-color-base;
	padding-bottom: 100upx;
}

.address-section {
	padding: 30upx 0;
	background: #fff;
	position: relative;

	.order-content {
		display: flex;
		align-items: center;
	}

	.icon-shouhuodizhi {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90upx;
		color: #888;
		font-size: 44upx;
	}

	.cen {
		display: flex;
		flex-direction: column;
		flex: 1;
		font-size: 28upx;
		color: $font-color-dark;
	}

	.name {
		font-size: 34upx;
		margin-right: 24upx;
	}

	.address {
		margin-top: 16upx;
		margin-right: 20upx;
		color: $font-color-light;
	}

	.icon-you {
		font-size: 32upx;
		color: $font-color-light;
		margin-right: 30upx;
	}

	.a-bg {
		position: absolute;
		left: 0;
		bottom: 0;
		display: block;
		width: 100%;
		height: 5upx;
	}
}

.goods-section {
	margin-top: 16upx;
	background: #fff;
	padding-bottom: 1px;

	.g-header {
		display: flex;
		align-items: center;
		height: 84upx;
		padding: 0 30upx;
		position: relative;
	}

	.logo {
		display: block;
		width: 50upx;
		height: 50upx;
		border-radius: 100px;
	}

	.name {
		font-size: 30upx;
		color: $font-color-base;
		margin-left: 24upx;
	}

	.g-item {
		display: flex;
		margin: 10px 15px;
		padding-top: 20upx;

		image {
			flex-shrink: 0;
			display: block;
			width: 140upx;
			height: 140upx;
			border-radius: 4upx;
		}

		.right {
			flex: 1;
			padding-left: 24upx;
			overflow: hidden;
		}

		.title {
			font-size: 30upx;
			color: $font-color-dark;
		}

		.spec {
			font-size: 26upx;
			color: $font-color-light;
		}

		.price-box {
			display: flex;
			align-items: center;
			font-size: 30upx;
			color: $font-color-dark;
			padding-top: 10upx;

			.price {
				margin-bottom: 4upx;
				color: #fa436a;
			}
			.number {
				font-size: 26upx;
				color: $font-color-base;
				margin-left: 5upx;
			}
		}

		.step-box {
			position: relative;
		}
	}
}
.yt-list {
	margin-top: 16upx;
	background: #fff;
}

.yt-list-cell {
	display: flex;
	align-items: center;
	padding: 10upx 30upx 10upx 40upx;
	line-height: 70upx;
	position: relative;
	.title{
		color: #f85e52;
	}

	.hb {
		color: #ffaa0e;
	}

	.lpk {
		color: #3ab54a;
	}


	&.cell-hover {
		background: #fafafa;
	}

	&.b-b:after {
		left: 30upx;
	}

	.cell-icon {
		height: 32upx;
		width: 64upx;
		font-size: 22upx;
		color: #fff;
		text-align: center;
		line-height: 32upx;
		background: #f85e52;
		border-radius: 4upx;
		margin-right: 12upx;

		&.hb {
			background: #ffaa0e;
		}

		&.lpk {
			background: #3ab54a;
		}
	}

	.cell-more {
		align-self: center;
		font-size: 24upx;
		color: $font-color-light;
		margin-left: 8upx;
		margin-right: -10upx;
	}

	.cell-tit {
		flex: 1;
		font-size: 26upx;
		color: $font-color-light;
		margin-right: 10upx;
	}

	.cell-tip {
		font-size: 26upx;
		color: $font-color-dark;

		&.disabled {
			color: $font-color-light;
		}

		&.active {
			color: $base-color;
		}
		&.red {
			color: $base-color;
		}
	}

	&.desc-cell {
		.cell-tit {
			max-width: 90upx;
		}
	}

	.desc {
		flex: 1;
		font-size: $font-base;
		color: $font-color-dark;
	}
}

/* 支付列表 */
.pay-list {
	padding-left: 40upx;
	margin-top: 16upx;
	background: #fff;
	.pay-item {
		display: flex;
		align-items: center;
		padding-right: 20upx;
		line-height: 1;
		height: 110upx;
		position: relative;
	}
	.icon-weixinzhifu {
		width: 80upx;
		font-size: 40upx;
		color: #6bcc03;
	}
	.icon-alipay {
		width: 80upx;
		font-size: 40upx;
		color: #06b4fd;
	}
	.icon-xuanzhong2 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60upx;
		height: 60upx;
		font-size: 40upx;
		color: $base-color;
	}
	.tit {
		font-size: 32upx;
		color: $font-color-dark;
		flex: 1;
	}
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 995;
	display: flex;
	align-items: center;
	width: 100%;
	height: 90upx;
	justify-content: space-between;
	font-size: 30upx;
	background-color: #fff;
	z-index: 99;
	color: $font-color-base;
	box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
	.price-content {
		padding-left: 30upx;
	}
	.price-tip {
		color: $base-color;
		margin-left: 8upx;
	}
	.price {
		font-size: 36upx;
		color: $base-color;
	}
	.submit {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 280upx;
		height: 100%;
		color: #fff;
		font-size: 32upx;
		background-color: $base-color;
	}
}

/* 优惠券面板 */
.mask {
	display: flex;
	align-items: flex-end;
	position: fixed;
	left: 0;
	top: var(--window-top);
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0);
	z-index: 9995;
	transition: 0.3s;

	.mask-content {
		width: 100%;
		min-height: 30vh;
		max-height: 70vh;
		background: #f3f3f3;
		transform: translateY(100%);
		transition: 0.3s;
		overflow-y: scroll;
	}
	&.none {
		display: none;
	}
	&.show {
		background: rgba(0, 0, 0, 0.4);

		.mask-content {
			transform: translateY(0);
		}
	}
}

/* 优惠券列表 */
.coupon-item {
	display: flex;
	flex-direction: column;
	margin: 20upx 24upx;
	background: #fff;
	.con {
		display: flex;
		align-items: center;
		position: relative;
		height: 120upx;
		padding: 0 30upx;
		&:after {
			position: absolute;
			left: 0;
			bottom: 0;
			content: '';
			width: 100%;
			height: 0;
			border-bottom: 1px dashed #f3f3f3;
			transform: scaleY(50%);
		}
	}
	.left {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		overflow: hidden;
		height: 100upx;
	}
	.title {
		font-size: 32upx;
		color: $font-color-dark;
		margin-bottom: 10upx;
	}
	.time {
		font-size: 24upx;
		color: $font-color-light;
	}
	.right {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26upx;
		color: $font-color-base;
		height: 100upx;
	}
	.price {
		font-size: 44upx;
		color: $base-color;
		&:before {
			content: '￥';
			font-size: 34upx;
		}
	}
	.tips {
		font-size: 24upx;
		color: $font-color-light;
		line-height: 60upx;
		padding-left: 30upx;
	}
	.circle {
		position: absolute;
		left: -6upx;
		bottom: -10upx;
		z-index: 10;
		width: 20upx;
		height: 20upx;
		background: #f3f3f3;
		border-radius: 100px;
		&.r {
			left: auto;
			right: -6upx;
		}
	}
}
.appointment-date-item::after {
	font-family: cuIcon;
	display: block;
	content: '\e6a3';
	position: absolute;
	font-size: 17px;
	color: #8799a3;
	line-height: 50px;
	width: 30px;
	text-align: center;
	top: 0;
	bottom: 0;
	right: -10px;
	margin: auto;
}

/*  弹出层 */
.popup {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99;

	&.show {
		display: block;
		.mask {
			animation: showPopup 0.2s linear both;
		}
		.layer {
			animation: showLayer 0.2s linear both;
		}
	}
	&.hide {
		.mask {
			animation: hidePopup 0.2s linear both;
		}
		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}
	&.none {
		display: none;
	}
	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.layer {
		position: fixed;
		z-index: 99;
		bottom: 0;
		width: 100%;
		min-height: 40vh;
		border-radius: 10upx 10upx 0 0;
		background-color: #fff;
		.btn {
			height: 66upx;
			line-height: 66upx;
			border-radius: 100upx;
			background: $uni-color-primary;
			font-size: $font-base + 2upx;
			color: #fff;
			margin: 30upx auto 20upx;
		}
	}
	@keyframes showPopup {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes showLayer {
		0% {
			transform: translateY(120%);
		}
		100% {
			transform: translateY(0%);
		}
	}
	@keyframes hideLayer {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(120%);
		}
	}

}
.uni-numbox{
	position: inherit;
}
.text-green, .line-green, .lines-green{
	color: #fa436a;
}
.bg-green{
	background-color: #fa436a;
}

.cuIcon-locationfill,.cuIcon-right{
	font-size: 1.5rem;
}
.padding-lg{
	padding: 20px 0;
}
.flex.solid-bottom.between{
	width: 100%;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.content-item{
	margin-top: 10px;
	background: #FFFFFF;
	border-radius: 5px;
	border: 1px solid #e2e2e2;
	padding: 10px 0;
}
.title-item{
	padding: 0.5px 16px;
}
.title-item span{
	border-left: 5px solid #fa436a;
	margin-right: 10px;
}
</style>
